<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工信息</title>
<!--    vue的核心库vue2.0渲染数据-->
<!--    <script src=" https://cdn.staticfile.net/vue/2.2.2/vue.min.js "></script>-->
<!--    axios库-->
<!--    <script src=" https://unpkg.com/axios/dist/axios.min.js "></script>-->
    <script src="js/axios.js"></script>
    <script src="js/vue.js"></script>
    <style>
        #app table{
            border:solid 1px #455a2e;
            margin:0 auto;
            width: 700px;
            font-size:20px;
            border-collapse: collapse;
        }
        tr,td{
            border:solid 1px #a4da41;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="user">
<!--        v-model 双向改变-->
        <input type="test" v-model="newdept.name"><br>
        <button @click="addDept">添加</button>
    </div>
    <table>
        <tr>
            <th>ID</th>
            <th>部门名称</th>
            <th>操作</th>
        </tr>
        <tr v-for="dept in detps":key="dept.id">
            <td>{{dept.id}}</td>
            <td>{{dept.name}}</td>
            <td>{{dept.createTime}}</td>
            <td><button @click="deleteDept(dept.id)" type="button" onclick="alert('按钮被点击了')">删除</button></td>
            <td><button @click="updateDept(dept.id)">修改</button></td>
        </tr>
    </table>
</div>
<script>
    new Vue(
        {
            el:"#app",
            data:{
                newdept:{name:''},
                detps:[]
            },
            mounted(){
                this.loadDepts();
            },
            methods:{
                loadDepts(){
                    axios.get('http://localhost:8080/dept').then(
                        response=>{
                            this.detps=response.data.data;
                        }
                    )
                },
                deleteDept(id){
                    axios.delete(`http://localhost:8080/dept/${id}`).then(
                        ()=>this.loadDepts()
                    )
                },

                addDept(){
                    if (this.newdept.name==""){
                        alert("数据呢")
                        return;
                    }
                    axios.post("http://localhost:8080/dept" ,this.newdept).then(
                        ()=>
                        {
                            this.newdept.name="",
                                this.loadDepts()
                        }
                    )
                },
                updateDept(id){
                    axios.get(`http://localhost:8080/dept/${id}`).then(
                        response=>{
                            let a=response.data.data;
                            console.log(a);
                            let newName=prompt("请输入部门新名称",a.name);
                            let updateDept={
                                id:a.id,
                                name:newName,
                                createTime:a.createTime,
                                updateTime:new Date().toISOString()
                            }
                            axios.put("http://localhost:8080/dept",updateDept).then(
                                ()=>{
                                    this.loadDepts();
                                }
                            )
                        }
                    )
                }
             }
        }
    )
</script>
</body>
</html>